<template>
  <div class="main commodity-freight-edit">
    <div class="main-title">
      <h4>配置模板详情</h4>
      <div class="btn-box">
        <el-button
          class="filter-item"
          type="success"
          size="small"
          :loading="btnLoading"
          @click="save"
          v-if="!id"
        >保存</el-button>
        <el-button
          class="filter-item"
          type="danger"
          size="small"
          :loading="btnLoading"
          @click="updateStatus"
        >返回</el-button>
      </div>
    </div>
    <el-card class="box-card">
      <el-form
        :model="formData"
        :rules="rulesBase"
        size="medium"
        ref="formBase"
        label-width="150px"
        :disabled="isdisabled"
      >
        <el-form-item label="选择运费模板:" prop="freightTemplateId">
          <el-select
            v-model="formData.freightTemplateId"
            placeholder="请选择"
            @change="changeArea"
            filterable
            clearable
          >
            <el-option
              :key="item.id"
              :label="item.name"
              :value="item.id"
              v-for="item in freightList"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="unsupported.length > 0 || supported.length > 0">
          <!-- <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间"
                    :header-cell-style="{background: '#eee'}"
                    style="width: 90%"
                    border
                    highlight-current-row>
                    <el-table-column align="center" label="地区" prop="area"></el-table-column>
                    <el-table-column align="center" label="首件件数" prop="firstNum"></el-table-column>
                    <el-table-column align="center" label="首件运费(元)" prop="first"></el-table-column>
                    <el-table-column align="center" label="续件件数" prop="secondNum"></el-table-column>
                    <el-table-column align="center" label="续件运费(元)" prop="second"></el-table-column>
          </el-table>-->
          <!--<el-table-->
            <!--:data="supported"-->
            <!--style="width: 90%"-->
            <!--border-->
            <!--highlight-current-row-->
            <!--:header-cell-style="{background: '#eee'}"-->
          <!--&gt;-->
            <!--<el-table-column align="center" label="配送地区">-->
              <!--<template slot-scope="scope">-->
                <!--<p style="text-align: left">{{scope.row.area}}</p>-->
              <!--</template>-->
            <!--</el-table-column>-->
          <!--</el-table>-->

          <el-table
            :data="list"
            element-loading-text="给我一点时间"
            :header-cell-style="{background: '#eee'}"
            style="width: 90%; margin-bottom: 20px"
            border
            highlight-current-row
          >
            <div style="float: left">
              <el-table-column  align="center" label="地区" prop="area">
                <template  slot-scope="scope">
                  <div class="area-wrapper">
                    <p class="area-list">
                      {{scope.row.string}}
                    </p>
                  </div>
                </template>
              </el-table-column>
            </div>
            <!--计重-->
            <div v-if="cType==='1'" style="float: right">
              <el-table-column align="center" label="首重(kg)" prop="weightFirst" width="110px">
                <template slot-scope="scope">
                  {{scope.row.startUnit.toFixed(2)}}
                </template>
              </el-table-column>
              <el-table-column align="center" label="首重运费(元)" prop="weightFirstPrice" width="110px">
                <template slot-scope="scope">
                  {{scope.row.price.toFixed(2)}}
                </template>
              </el-table-column>
              <el-table-column align="center" label="续重(kg)" prop="weightContinue" width="110px">
                <template slot-scope="scope">
                  {{scope.row.continuedUnit.toFixed(2)}}
                </template>
              </el-table-column>
              <el-table-column align="center" label="续重运费(元)" prop="weightContinuePrice" width="110px">
                <template slot-scope="scope">
                  {{scope.row.continuedPrice.toFixed(2)}}
                </template>
              </el-table-column>
            </div>
            <!--计件-->
            <div v-if="cType==='3'" style="float: right">
              <el-table-column align="center" label="首件件数" prop="countFirst" width="110px">
                <template slot-scope="scope">
                  {{scope.row.startUnit}}
                </template>
              </el-table-column>
              <el-table-column align="center" label="首件运费(元)" prop="countFirstPrice" width="110px">
                <template slot-scope="scope">
                  {{scope.row.price.toFixed(2)}}
                </template>
              </el-table-column>
              <el-table-column align="center" label="续件件数" prop="countContinue" width="110px">
                <template slot-scope="scope">
                  {{scope.row.continuedUnit}}
                </template>
              </el-table-column>
              <el-table-column align="center" label="续件运费(元)" prop="countContinuePrice" width="110px">
                <template slot-scope="scope">
                  {{scope.row.continuedPrice.toFixed(2)}}
                </template>
              </el-table-column>
            </div>

          </el-table>


          <el-table
            :data="unsupported"
            style="width: 90%"
            border
            highlight-current-row
            :header-cell-style="{background: '#eee'}"
          >
            <el-table-column align="center" label="不配送地区">
              <template slot-scope="scope">
                <p style="text-align: left">{{scope.row.area}}</p>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="选择配置类型:" prop="configType">
          <el-select v-model="formData.configType" placeholder="请选择">
            <el-option :key="1" label="经营模式" :value="1"></el-option>
            <el-option :key="2" label="商品类目" :value="2"></el-option>
            <el-option :key="3" label="指定商品" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <!-- 经营模式 -->
        <el-form-item
          v-show="formData.configType == 1"
          prop="businessModel"
          :rules="formData.configType == 1 ? [{required: true, message: '请选择', trigger: 'change'}]: []"
        >
          <el-radio-group v-model="formData.businessModel">
            <el-radio label="1" :key="1" :value="1">自营商品</el-radio>
            <el-radio label="2" :key="2" :value="2">招商商品</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 商品类目 -->
        <el-form-item v-show="formData.configType == 2">
          <el-form-item
            label="一级类目："
            label-width="100px"
            prop="oneCategoryId"
            :rules="formData.configType == 2 ? [{required: true, message: '请选择', trigger: 'change'}]: []"
          >
            <el-select v-model="formData.oneCategoryId" placeholder="请选择" @change="changeCategory(true)">
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <div class="check-list" v-show="categoryChildren.length > 0">
            <el-checkbox label="全部" @change="handelCheckAll" v-model="checkAll"></el-checkbox>
          </div>
          <el-form-item
            prop="twoCategoryIdList"
            :rules="formData.configType == 2 && categoryChildren.length > 0 ? [{required: true, message: '请选择', trigger: 'change'}]: []"
          >
            <el-checkbox-group v-model="formData.twoCategoryIdList" @change="hanldeCheckSingle">
              <div class="check-list" v-for="item in categoryChildren" :key="item.id">
                <el-checkbox :label="item.id" :value="item.id">{{item.name}}</el-checkbox>
              </div>
            </el-checkbox-group>
          </el-form-item>
        </el-form-item>
        <!-- 指定商品 -->
        <el-form-item
          v-show="formData.configType == 3"
          prop="goodsType"
          :rules="formData.configType == 3 ? [{required: true, message: '请选择', trigger: 'change'}]: []"
        >
          <div class="box-title">
            <el-radio-group v-model="formData.goodsType">
              <el-radio label="1" :key="1" :value="1">单品</el-radio>
              <el-radio label="2" :key="2" :value="2">套餐</el-radio>
              <el-radio label="3" :key="3" :value="3">城市合伙人</el-radio>
              <el-radio label="4" :key="4" :value="4">独立箱起</el-radio>
            </el-radio-group>
          </div>
          <!-- 单品 -->
          <div class="box-wrapper" v-show="formData.goodsType == 1">
            <div class="box-title-wrapper">
              <el-button
                type="success"
                icon="el-icon-plus"
                class="filter-item"
                @click="chooseJump(1)"
                v-show="!isdisabled"
              >选择商品</el-button>
            </div>
            <el-table :data="goodsList" border highlight-current-row>
              <el-table-column prop="name" label="商品名称"></el-table-column>
              <el-table-column prop="serialNo" label="商品款" width="180" align="center" v-if="!isdisabled"></el-table-column>
              <el-table-column prop="categoryName" label="分类" width="180" align="center"></el-table-column>
              <el-table-column label="操作" width="180" align="center" v-if="!isdisabled">
                <template slot-scope="scope">
                  <el-button type="danger" size="mini" @click="delTableItem(1, scope.row)" v-show="!isdisabled">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 套餐 -->
          <div class="box-wrapper" v-show="formData.goodsType == 2">
            <div class="box-title-wrapper">
              <el-button
                type="success"
                icon="el-icon-plus"
                class="filter-item"
                  v-show="!isdisabled"
                @click="chooseJump(2)"
              >选择套餐</el-button>
            </div>
            <el-table :data="packageList" border highlight-current-row>
              <el-table-column prop="name" label="套餐名称" align="center"></el-table-column>
              <el-table-column label="套餐类型" width="180" align="center">
                <template slot-scope="scope">
                  <span>{{types[scope.row.type]}}</span>
                </template>
              </el-table-column>
              <el-table-column label="兰蜜价" width="180" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.price | money}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                  <el-button type="danger" size="mini" @click="delTableItem(2, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 城市合伙人 -->
          <div class="box-wrapper" v-show="formData.goodsType == 3">
            <div class="box-title-wrapper">
              <el-button
                type="success"
                icon="el-icon-plus"
                class="filter-item"
                  v-show="!isdisabled"
                @click="chooseJump(3)"
              >选择城市合伙人</el-button>
            </div>
            <el-table :data="partnerList" border highlight-current-row>
              <el-table-column prop="name" label="名称" align="center"></el-table-column>
              <el-table-column label="购买等级" width="180" align="center">
                <template slot-scope="scope">
                  <template v-for="(item, index) in scope.row.buyRole.split(',')">
                    <span
                      v-if="item==='0'"
                      :key="index + 'dengji1'"
                    >普通{{index===scope.row.buyRole.split(',').length-1?'':'、'}}</span>
                    <span
                      v-if="item==='1'"
                      :key="index + 'dengji2'"
                    >兰蜜{{index===scope.row.buyRole.split(',').length-1?'':'、'}}</span>
                    <span
                      v-if="item==='2'"
                      :key="index + 'dengji3'"
                    >大区{{index===scope.row.buyRole.split(',').length-1?'':'、'}}</span>
                    <span
                      v-if="item==='3'"
                      :key="index + 'dengji4'"
                    >董事{{index===scope.row.buyRole.split(',').length-1?'':'、'}}</span>
                  </template>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                  <el-button type="danger" size="mini" @click="delTableItem(3, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 独立箱起 -->
          <div class="box-wrapper" v-show="formData.goodsType == 4">
            <div class="box-title-wrapper">
              <el-button
                type="success"
                icon="el-icon-plus"
                class="filter-item"
                @click="chooseJump(4)"
                  v-show="!isdisabled"
              >选择独立箱起</el-button>
            </div>
            <el-table :data="boxList" border highlight-current-row>
              <el-table-column prop="seriesName" label="活动系列名称" align="center"></el-table-column>
              <el-table-column label="活动商品名称" width="180" align="center">暂无</el-table-column>
              <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                  <el-button type="danger" size="mini" @click="delTableItem(4, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 正在配置弹窗 -->
    <el-dialog
      title="正在配置"
      :visible.sync="centerDialogVisible1"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="conf-wrapper">
        <el-progress :percentage="50"></el-progress>
        <div class="tip">正在配置中，请耐心等待…</div>
      </div>

      <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>-->
    </el-dialog>
    <!-- 配置结果弹窗 -->
    <el-dialog
      title="配置结果"
      :visible.sync="centerDialogVisible2"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="conf-wrapper">
        <div class="tip">处理M条数据，N条数据配置成功，0条失败</div>
      </div>
      <div slot="footer" class>
        <el-button type="success" @click="centerDialogVisible2 = false">导出失败商品</el-button>
        <el-button type="primary" @click="centerDialogVisible2 = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTemplateById, getAllList, getCategory, saveTplConf, getTplConf, getBoxList, getGoodList, getpackageList, getPartnerList } from "@/api/freight";
export default {
  data() {
    return {
      list: [],
      cType: '',
      btnLoading: false,
      listLoading: false,
      freightList: [],
      unsupported: [],
      supported: [],

      formData: {
        freightTemplateId: "",
        freightTemplateNm: '',
        configType: "", // 1经营模式   2商品类目  3指定商品
        businessModel: "", //1自营 2招商
        oneCategoryId: "", // 一级类目
        twoCategoryIdList: [], // 二级类目id数组
        goodsType: "", //  1单品 2套餐 3城市合伙人  4独立箱起
        goodsIdList: []
      },
      rulesBase: {
        freightTemplateId: [
          { required: true, message: "不能为空", trigger: "change" }
        ],
        configType: [{ required: true, message: "不能为空", trigger: "change" }]
      },
      goodsList: [],
      packageList: [],
      partnerList: [],
      boxList: [],

      centerDialogVisible1: false, // 正在配置
      centerDialogVisible2: false, // 正在配置
      categoryList: [],
      categoryChildren: [],
      checkAll: false,
      types: {
        "1": "固定模式",
        "2": "自由组合模式"
      }
    };
  },
  props: ['id'],
  created() {
    this.getAllTpl();
    this.getCategories();
  },
  computed: {
    isdisabled() {
      return this.id ? true:false
    }
  },
  methods: {
    // 编辑获取数据
    getEditData() {
      getTplConf({configId: this.id}).then(res => {
      if (res.status == 200) {
        this.formData.freightTemplateId = res.data.freightTemplateId + ''
        this.formData.freightTemplateNm = res.data.freightTemplateNm
        this.formData.configType = res.data.configType
        this.changeArea()
        if (this.formData.configType == 1) {
          this.formData.businessModel = res.data.businessModel + ''
        } else if (this.formData.configType == 2) {
          this.formData.oneCategoryId = res.data.oneCategoryId
          this.formData.twoCategoryIdList = res.data.twoCategoryIdList.split(',').map(item => {
            return Number(item)
          })
          this.changeCategory(false)
        } else if(this.formData.configType == 3) {
          this.formData.goodsType = res.data.goodsType + ''
          this.formData.goodsIdList = res.data.goodsIdList
          const params = {
            ids: this.formData.goodsType,
            idList:  this.formData.goodsIdList.split(',')
          }
          // 1单品 2套餐 3城市合伙人  4独立箱起
          if(this.formData.goodsType == 1) {
            getGoodList(params).then(res => {
              this.goodsList = res.data2 ? res.data2: []
            })
          } else if (this.formData.goodsType == 2) {
             getpackageList(params).then(res => {
              this.packageList = res.data2 ? res.data2: []
            })
          } else if (this.formData.goodsType == 3) {
             getPartnerList(params).then(res => {
              this.partnerList = res.data2 ? res.data2: []
            })
          } else if (this.formData.goodsType == 4) {
             getBoxList(params).then(res => {
              this.boxList = res.data2 ? res.data2: []
            })
          }
        }
      } else {
        this.$message({
            type: 'error',
            message: res.message,
            duration: 2000
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取所有模板
    getAllTpl() {
      getAllList()
        .then(res => {
          if (res.code == 0) {
            this.freightList = res.data;
          } else {
            this.$message({
              type: "error",
              message: res.message,
              duration: 2000
            });
          }
        })
        .catch(err => {
          this.$message({
            type: "error",
            message: "未知错误",
            duration: 2000
          });
        });
    },
    //  根据选择的模板改变表格
    changeArea() {
      this.supported = []
      this.unsupported = []
       getTemplateById(this.formData.freightTemplateId).then(res =>{
         console.log('res.data.calcuType', res.data.calcuType)
         this.cType = JSON.stringify(res.data.calcuType)
         let supported = []
         if (res.data && res.data.details) {
            res.data.details.forEach(item => {
                supported.push(item.deliveryAddrName)
              })
            this.supported.push({
              area: supported.join(',')
            })
            this.unsupported.push({
              area:res.data.unsupported
            })
         }

         // 初始化取到的配置
         let listSplit = []
         // 判断数据是否为1.0版本的, line不为空则为2.0， 空则为1.0
         if (res.data.details[0].line !== null) {
           console.log('1')
           res.data.details.map(item => {
             item.name = item.deliveryAddrName
             item.value = item.deliveryAddrCode
             item.realname = item.deliveryAddrName

             if (!listSplit[item.line]){
               listSplit[item.line] = {}
               if (listSplit[item.line].ruleArea) {
                 console.log('none')
               } else {
                 const index = item.line
                 listSplit[item.line].ruleArea = []
                 let arr = listSplit[index].ruleArea
                 delete item['line']
                 arr.push(item)
               }
             } else {
               const index = item.line
               delete item['line']
               listSplit[index].ruleArea.push(item)
             }
           })
           listSplit.forEach(item => {
             let str = ''
             item.ruleArea.forEach(sitem => {
               str +=  (sitem.deliveryAddrName) + ','
             })
             str = str.slice(0, str.length-1)
             item.startUnit = item.ruleArea[0].startUnit
             item.price = item.ruleArea[0].price
             item.continuedUnit = item.ruleArea[0].continuedUnit
             item.continuedPrice = item.ruleArea[0].continuedPrice
             item.string = str
           })

         } else {
           console.log('2')
           // 1.0 版本处理
           let str = ''
           listSplit[0] = {}
           listSplit[0].ruleArea = []

           res.data.details.forEach(sitem => {
             str +=  sitem.deliveryAddrName + ','
             sitem.name = sitem.deliveryAddrName
             sitem.value = sitem.deliveryAddrCode
             sitem.realname = sitem.deliveryAddrName
             listSplit[0].ruleArea.push(sitem)
           })
           str = str.slice(0, str.length-1)

           listSplit[0].startUnit = 0
           listSplit[0].price = 0
           listSplit[0].continuedUnit = 0
           listSplit[0].continuedPrice = 0
           listSplit[0].string = str
         }
         this.list = listSplit
         console.log('this.list', this.list)

      })
      // let selFreight = this.freightList.filter(
      //   item => item.id == this.formData.freightTemplateId
      // );
      // this.unsupported = [];
      // if (selFreight.length > 0) {
      //   this.unsupported.push({
      //     area: selFreight[0].unsupported
      //   });
      // }

    },
    // 获取类目
    getCategories() {
      getCategory()
        .then(res => {
          this.categoryList = res.data;
          if (this.id) {
            this.getEditData()
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 改变一级类目
    changeCategory(flag) {
      this.categoryChildren = [];
      if (flag){
         this.formData.twoCategoryIdList = [];
      }
      this.categoryChildren = this.categoryList.filter(
        item => item.id == this.formData.oneCategoryId
      )[0].children;
      if (!flag) {
        this.hanldeCheckSingle()
      }
    },
    // 二级类目全选
    handelCheckAll(val) {
      if (val) {
        this.categoryChildren.forEach(item => {
          if (this.formData.twoCategoryIdList.indexOf(item.id) == -1) {
            this.formData.twoCategoryIdList.push(item.id);
          }
        });
      } else {
        this.formData.twoCategoryIdList = [];
      }
    },
    // 二级类目单选
    hanldeCheckSingle() {
      this.checkAll =
        this.formData.twoCategoryIdList.length == this.categoryChildren.length
          ? true
          : false;
    },
    // 选择商品 套餐 合伙人  箱起
    chooseJump(type) {
      if (type == 1) {
        let checkData = [...this.goodsList];
        this.goodsChoose({}, checkData).then(val => {
          this.goodsList = [...val];
        });
        return false;
      } else if (type == 2) {
        let checkData = [...this.packageList];
        this.packageChoose({}, checkData).then(val => {
          this.packageList = [...val];
        });
        return false;
      } else if (type == 3) {
        let checkData = [...this.partnerList];
        this.partnerChoose({}, checkData).then(val => {
          this.partnerList = [...val];
        });
      } else if (type == 4) {
        let checkData = [...this.boxList];
        this.boxChoose({}, checkData).then(val => {
          this.boxList = [...val];
        });
      }
    },
    // 删除
    delTableItem(type, info) {
      if (type == 1) {
        let newGoodsList = this.goodsList.filter(item => item.id != info.id);
        this.goodsList = newGoodsList;
      } else if (type == 2) {
        let newPackageList = this.packageList.filter(
          item => item.id != info.id
        );
        this.packageList = newPackageList;
      } else if (type == 3) {
        let newPartnerList = this.partnerList.filter(
          item => item.id != info.id
        );
        this.partnerList = newPartnerList;
      } else if (type == 4) {
        let newBoxList = this.boxList.filter(item => item.id != info.id);
        this.boxList = newBoxList;
      }
    },
    // 提交保存
    save() {
      this.$refs["formBase"].validate(valid => {
        if (valid) {
          let params = {};
          params.freightTemplateId = Number(this.formData.freightTemplateId);
          const freightArr = this.freightList.filter(item => item.id == this.formData.freightTemplateId)
          params.freightTemplateNm = freightArr[0].name
          params.configType = Number(this.formData.configType);
          if (params.configType == 1) {
            params.businessModel =  Number(this.formData.businessModel);
          } else if (params.configType == 2) {
            params.oneCategoryId =  Number(this.formData.oneCategoryId);
            params.twoCategoryIdList = this.formData.twoCategoryIdList.join(',');
          } else if (params.configType == 3) {
            params.goodsType =  Number(this.formData.goodsType);
            if (this.goodsList.length == 0 && this.packageList.length == 0 && this.partnerList.length == 0 && this.boxList.length == 0) {
              let arrTxt = [
                "选择商品",
                "选择套餐",
                "选择城市合伙人",
                "选择独立箱起"
              ];
              this.$message({
                type: "error",
                message: `请${arrTxt[params.goodsType - 1]}`,
                duration: 2000
              });
              return false;
            } else {
                let goodsIdList = []
                if (params.goodsType == 1) {
                    this.goodsList.forEach(item => {
                        goodsIdList.push(item.goodsId);
                    });
                } else if (params.goodsType == 2) {
                    this.packageList.forEach(item => {
                        goodsIdList.push(item.packageId);
                    });
                } else if (params.goodsType == 3) {
                    this.partnerList.forEach(item => {
                        goodsIdList.push(item.packageId);
                    });
                } else if (params.goodsType == 4) {
                    this.boxList.forEach(item => {
                        goodsIdList.push(item.seriesId);
                    });
                }
                params.goodsIdList = goodsIdList.join(',')
            }
          }
          // if (this.id) {
          //   params.id = Number(this.id)
          // }
          this.btnLoading = true
         saveTplConf(params).then(res => {
           if (res.status == 200) {
             this.$message({
               type: 'success',
               message: 'success',
               duration: 2000,
               onClose: () => {
                // this.$router.push({name: 'freight'})
                this.btnLoading = false
                this.updateStatus()
               }
             })
           }
         }).catch(err => {
           console.log(err)
           this.btnLoading = false
         })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    updateStatus() {
      this.$store.dispatch('delVisitedViews', this.$route);
      this.$router.go(-1)
    }
  }
};
</script>
<style>
.check-list {
  display: inline-block;
  margin-right: 50px;
  margin-top: 20px;
}
.box-title {
  border-bottom: 1px solid #ccc;
  width: 80%;
  padding-bottom: 20px;
}
.box-wrapper {
  width: 80%;
}
.box-title-wrapper {
  overflow: hidden;
  padding: 20px 0;
}
.box-title-wrapper .filter-item {
  float: right;
}
.conf-wrapper .tip {
  padding: 20px 0;
}
.commodity-freight-edit .el-dialog__body {
  padding-top: 10px;
  padding-bottom: 10px;
}
.commodity-freight-edit .el-dialog__footer {
  text-align: center;
}
</style>
